<template>
  <div class="col-md-4">
    <form class="form-horizontal" @submit.prevent="handleSubmit">
      <div class="form-group">
        <label>用户名</label>
        <input type="text" class="form-control" placeholder="用户名" v-model="formData.userName" />
      </div>
      <div class="form-group">
        <label>评论内容</label>
        <textarea class="form-control" rows="6" placeholder="评论内容" v-model="formData.content"></textarea>
      </div>
      <div class="form-group">
        <div class="col-sm-offset-2 col-sm-10">
          <button type="submit" class="btn btn-default pull-right">
            提交
          </button>
        </div>
      </div>
    </form>
  </div>
</template>
<script>
export default {
  name: "AddCommon",
  data() { 
    return {
      formData: {
        userName: "",
        content:"",
      },
    }
  },
  methods: {
    handleSubmit() { 
      const { userName, content } = this.formData;
      if (!userName || !content) { 
        alert("内容为空,请填入");
        return;
      }
      this.$bus.$emit("addComment", userName, content);
      this.formData.userName = "";
      this.formData.content = "";
    }
  }

}
</script>
<style>

</style>